<!-- src/views/routerDetail/index.vue -->
<template>
  <div class="detail-container">
    <el-card>
      <template #header>
        <div class="header-content">
          <h2>路由详情页 - Params 参数演示</h2>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

      <el-alert
        title="这是一个接收 Params 参数的详情页"
        type="success"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      />

      <el-descriptions :column="2" border>
        <el-descriptions-item label="路由 Params ID">
          <el-tag type="primary" size="large">{{ route.params.id || '未传递' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="路由路径">
          {{ route.path }}
        </el-descriptions-item>
        <el-descriptions-item label="路由名称">
          {{ route.name }}
        </el-descriptions-item>
        <el-descriptions-item label="完整路径">
          {{ route.fullPath }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <div class="info-section">
        <h3>Params 参数说明</h3>
        <ul>
          <li>当前接收到的 ID: <strong>{{ route.params.id }}</strong></li>
          <li>Params 参数在 URL 中显示为路径的一部分: /routerDetail/{{ route.params.id }}</li>
          <li>不同于 Query 参数（?key=value），Params 更加简洁美观</li>
          <li>Params 需要配合命名路由和动态路由段使用</li>
        </ul>
      </div>

      <el-divider />

      <div class="example-section">
        <h3>如何跳转到此页面</h3>
        <el-tabs>
          <el-tab-pane label="编程式导航">
            <pre class="code-block">
// 使用命名路由 + params
router.push({
  name: 'RouterDetail',
  params: { id: 123 }
})

// 或者直接使用路径
router.push('/routerDetail/123')
            </pre>
          </el-tab-pane>
          <el-tab-pane label="声明式导航">
            <pre class="code-block">
&lt;!-- 使用命名路由 --&gt;
&lt;router-link :to="{ name: 'RouterDetail', params: { id: 123 } }"&gt;
  查看详情
&lt;/router-link&gt;

&lt;!-- 直接使用路径 --&gt;
&lt;router-link to="/routerDetail/123"&gt;
  查看详情
&lt;/router-link&gt;
            </pre>
          </el-tab-pane>
          <el-tab-pane label="路由配置">
            <pre class="code-block">
{
  path: 'routerDetail/:id',
  name: 'RouterDetail',
  component: () => import('@/views/routerDetail/index.vue'),
  meta: { title: '路由详情' }
}
            </pre>
          </el-tab-pane>
        </el-tabs>
      </div>

      <el-divider />

      <div class="action-section">
        <h3>快速跳转测试</h3>
        <el-space wrap>
          <el-button type="primary" @click="jumpToDetail('001')">
            跳转到详情 ID: 001
          </el-button>
          <el-button type="success" @click="jumpToDetail('002')">
            跳转到详情 ID: 002
          </el-button>
          <el-button type="info" @click="jumpToDetail('003')">
            跳转到详情 ID: 003
          </el-button>
          <el-button @click="goToRouterPage">
            返回路由演示页
          </el-button>
        </el-space>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

const goBack = () => {
  router.go(-1);
};

const jumpToDetail = (id) => {
  router.push({
    name: 'RouterDetail',
    params: { id }
  });
  ElMessage.success(`切换到详情 ID: ${id}`);
};

const goToRouterPage = () => {
  router.push({ name: 'RouterPage' });
};
</script>

<style lang="scss" scoped>

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    margin: 0;
  }
}

.info-section,
.example-section,
.action-section {
  margin: 20px 0;

  h3 {
    margin-bottom: 15px;
    color: #333;
  }

  ul {
    line-height: 2;
    color: #606266;

    strong {
      color: #409eff;
      font-size: 18px;
    }
  }
}

.code-block {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
</style>
